<template>
	<view>
		<fui-form ref="form">
			<div style="height:60rpx;padding:20rpx">基本信息</div>
			<fui-form-item label="姓名/昵称" labelSize="26">
				<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入姓名/昵称" textRight
					v-model="formData.nickName"></fui-input>
			</fui-form-item>
			<fui-form-item label="性别" labelSize="26">
				<view style="float:right" @click="showSex">{{formData.sex['text']}}</view>
			</fui-form-item>
			<fui-form-item label="生日" labelSize="26">
				<view @click="showBirthday" style="float:right">{{formData.birthday}}</view>
			</fui-form-item>
			<div style="height:60rpx;padding:20rpx">基本信息</div>
			<fui-form-item label="身高" highlight arrow arrowColor="#CCC" @click="showShengao">
				<view style="float:right">{{ formData.baseInfo.shengao }}cm</view>
			</fui-form-item>
			<fui-form-item label="体重" highlight arrow arrowColor="#CCC" @click="showTizhong">
				<view style="float:right">{{ formData.baseInfo.tizhong }}kg</view>
			</fui-form-item>
			<fui-form-item label="三围" highlight arrow arrowColor="#CCC" @click="showSanwei">
				<view style="float:right">
					胸围{{ formData.baseInfo.sanwei[0] }}腰围{{ formData.baseInfo.sanwei[1] }}臀围{{ formData.baseInfo.sanwei[2] }}
				</view>
			</fui-form-item>
			<!-- <fui-form-item label="罩杯" highlight arrow arrowColor="#CCC" @click="showSanwei"
				v-if="formData.sex['value'] == 0">
				<view style="float:right">{{ formData.baseInfo.zhaobei }}</view>
			</fui-form-item> -->
			<fui-form-item label="鞋码" highlight arrow arrowColor="#CCC" @click="showJiaoma">
				<view style="float:right">{{ formData.baseInfo.jiaoma }}</view>
			</fui-form-item>
		</fui-form>
		<!-- <view class="saveBtns">
			<fui-button background="#FFDD00" width="95%" height="70rpx" color="#000" class="saveBtn" @click="saveOtherInfo">下一步</fui-button>
		</view> -->
		<button class="sub-btn" @click="saveOtherInfo">下一步</button>
		<view style="height:150rpx"></view>
		<fui-picker linkage :options="sexs" :show="sexShow" @change="changeSex" @cancel="cancel('sex')"></fui-picker>
		<fui-date-picker :show="birthdayShow" type="3" minDate="1940-01-01" value="1990-01-01" @change="changeBirthday"
			@cancel="cancel('birthday')"></fui-date-picker>
		<fui-picker :options="baseInfo.shengaos" :value="formData.baseInfo.shengao" :show="baseInfo.showShengaos"
			@change="changeShengao" @cancel="cancelShengaos"></fui-picker>
		<fui-picker :options="baseInfo.tizhongs" :value="formData.baseInfo.tizhong" :show="baseInfo.showTizhongs"
			@change="changeTizhong" @cancel="cancelTizhongs"></fui-picker>
		<fui-picker :layer="3" :options="baseInfo.sanweis" :value="formData.baseInfo.sanwei"
			:show="baseInfo.showSanweis" @change="changeSanwei" @cancel="cancelSanweis"></fui-picker>
		<fui-picker :options="baseInfo.jiaomas" :value="formData.baseInfo.jiaoma" :show="baseInfo.showJiaomas"
			@change="changeJiaoma" @cancel="cancelJiaomas"></fui-picker>
		<!-- <fui-picker :options="baseInfo.zhaobeis" :value="formData.baseInfo.zhaobei" :show="baseInfo.showZhaobeis"
			@change="changeZhaobei" @cancel="cancelZhaobeis"></fui-picker> -->
	</view>
</template>

<script>
	const rules = [];
	export default {
		data() {
			return {
				mokaStyle: 0,
				OtherID: 0,
				OtherInfo: {},
				//表单data数据
				formData: {
					OtherID: 0,
					nickName: '',
					sex: {
						value: -1,
						text: '请设置性别'
					},
					birthday: '请设置生日',
					baseInfo: {
						shengao: 175,
						tizhong: 60,
						sanwei: [80, 80, 80],
						jiaoma: 39,
						// zhaobei: 'E'
					}
				},
				sexShow: false,
				sexs: [{
						value: -1,
						text: '请设置性别'
					},
					{
						value: 0,
						text: '女'
					},
					{
						value: 1,
						text: '男'
					}
				],
				birthdayShow: false,
				baseInfo: {
					shengaos: [],
					tizhongs: [],
					sanweis: [],
					jiaomas: [],
					// zhaobeis: [],
					showShengaos: false,
					showTizhongs: false,
					showSanweis: false,
					showJiaomas: false,
					// showZhaobeis: false
				}
			};
		},
		onLoad(option) {
			this.mokaStyle = option.style
			this.OtherID = Number(option.otherID)
			this.mokaTemplateID = option.mokaTemplateID;
			this.tempMoka = uni.getStorageSync("tempMoka");

			// console.log(this.mokaTemplateID, this.tempMoka);


			for (let i = 40; i < 221; i++) {
				this.baseInfo.shengaos.push(i);
			}
			for (let i = 30; i < 301; i++) {
				this.baseInfo.tizhongs.push(i);
			}

			let sanwei = [];
			for (let i = 40; i < 121; i++) {
				sanwei.push(i);
			}

			let xiongwei = ['A', 'B', 'C', 'D', 'E', 'F'];

			// this.baseInfo.sanweis.push(xiongwei)
			this.baseInfo.sanweis.push(sanwei)
			this.baseInfo.sanweis.push(sanwei)
			this.baseInfo.sanweis.push(sanwei)

			// console.log(this.baseInfo.sanweis)

			for (let i = 20; i < 49; i++) {
				this.baseInfo.jiaomas.push(i);
			}
			if (this.OtherID !== 0) {
				this.getOtherInfo();
			}
		},
		methods: {
			getOtherInfo() {
				this.$httpost('/UserAction/getOtherInfo', {
					OtherID: this.OtherID
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.OtherInfo = res.data.OtherInfo
						this.formData.OtherID = this.OtherInfo.OtherID
						this.formData.nickName = this.OtherInfo.NickName

						if (!this.OtherInfo.UserSex) {
							this.formData.sex = this.formData.sex
						} else {
							this.formData.sex = JSON.parse(this.OtherInfo.UserSex)
						}
						if (!this.OtherInfo.UserBirth) {
							this.formData.birthday = '请设置生日'
						} else {
							this.formData.birthday = this.OtherInfo.UserBirth
						}
					}

				})
			},
			changeZhaobei() {
				this.formData.zhaobei = e.result;
				this.baseInfo.showZhaobeis = true;
			},
			cancelZhaobeis() {
				this.baseInfo.showZhaobeis = false;
			},
			showSex() {
				this.sexShow = true
			},
			showBirthday() {
				this.birthdayShow = true
			},
			changeSex(e) {
				// console.log(e)
				this.formData.sex = e
				this.sexShow = false
			},
			changeBirthday(e) {
				// console.log(e)
				this.formData.birthday = e.result
				this.birthdayShow = false
			},
			cancel(type) {
				if (type == 'sex') {
					this.sexShow = false
				}
				if (type == 'birthday') {
					this.birthdayShow = false
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			showShengao() {
				// console.log('baseInfo11111', this.baseInfo)
				this.baseInfo.showShengaos = true
			},
			changeShengao(e) {
				// console.log(e)
				this.formData.baseInfo.shengao = e.result
				this.baseInfo.showShengaos = false
			},
			cancelShengaos() {
				this.baseInfo.showShengaos = false
			},
			showTizhong() {
				this.baseInfo.showTizhongs = true
			},
			changeTizhong(e) {
				// console.log(e)
				this.formData.baseInfo.tizhong = e.result
				this.baseInfo.showTizhongs = false
			},
			cancelTizhongs() {
				this.baseInfo.showTizhongs = false
			},
			showSanwei() {
				this.baseInfo.showSanweis = true
			},
			changeSanwei(e) {
				// console.log(e)
				this.formData.baseInfo.sanwei = e.value
				this.baseInfo.showSanweis = false
			},
			cancelSanweis() {
				this.baseInfo.showSanweis = false
			},
			showJiaoma() {
				this.baseInfo.showJiaomas = true
			},
			changeJiaoma(e) {
				// console.log(e)
				this.formData.baseInfo.jiaoma = e.result
				this.baseInfo.showJiaomas = false
			},
			cancelJiaomas() {
				this.baseInfo.showJiaomas = false
			},
			saveOtherInfo() {
				// console.log('form', this.formData);

				this.$refs.form.validator(this.formData, rules).then(result => {

					if (result.isPassed) {
						if (this.formData.nickName == '') {
							this.$common.showToast("请输入TA的姓名或昵称！");
							return false;
						}

						if (this.formData.sex.value == -1) {
							this.$common.showToast("请设置您的性别！");
							return false;
						}
						if (this.formData.birthday == '请设置您的生日') {
							this.$common.showToast("请设置您的生日！");
							return false;
						}

						this.$httpost('/UserAction/saveOtherInfo', this.formData).then(res => {
							if (res.code == 200) {
								// console.log(res)
								this.OtherInfo = res.data.OtherInfo
								this.OtherID = res.data.OtherInfo.OtherID
								if (this.mokaStyle == 1) {
									uni.navigateTo({
										url: '/moka/pages/mokaMakeingHeng?otherID=' + this
											.OtherID + '&mokaTemplateID=' + this.mokaTemplateID
									})
								} else if (this.mokaStyle == 2) {
									uni.navigateTo({
										url: '/moka/pages/mokaMakeingShu?otherID=' + this.OtherID +
											'&mokaTemplateID=' + this.mokaTemplateID
									})
								}
							}
						});
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.saveBtns {
		width: 100vw;
		position: fixed;
		z-index: 100;
		bottom: 0rpx;
	}

	.saveBtn {
		margin: auto;
	}
</style>